<template>
  <div class="bg">
    <!-- <background /> -->

    <div class="slide">
      <div class="stage">
        <h4 style="color: #FFFFFF;">{{ time }}</h4>
        <div class="logo" :style="'background-image: url('+ logo +')'" />
        <h3 style="text-align:center;font-size: 28px;margin-top: 280px;color: #FFFFFF;">{{ desc }}</h3>
      </div>
    </div>

    <div id="form" class="form">
      <h3 style="text-align:center;margin:20px 0 10px 0;font-size: 28px;">登录JPower</h3>
      <el-tabs v-model="activeName">
        <el-tab-pane label="账号密码登录" name="user">
          <userLogin />
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="code">
          <codeLogin />
        </el-tab-pane>
        <el-tab-pane label="第三方登录" name="third">
          <thirdLogin />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import userLogin from './userlogin'
import codeLogin from './codelogin'
import thirdLogin from './thirdlogin'
import store from '@/store/'
// import {
//   dateFormat
// } from '@/util/date'
import {
  validatenull
} from '@/utils/validate'
// import topLang from '@/page/index/top/top-lang'
// import topColor from '@/page/index/top/top-color'
// import background from '@/components/background/index'
export default {
  name: 'Login',
  components: {
    userLogin,
    codeLogin,
    thirdLogin
    // topLang,
    // topColor,
    // background
  },
  props: [],
  data() {
    return {
      time: '',
      activeName: 'user',
      logo: '/img/logo.png',
      desc: store.getters.logo ? '' : 'JPower'
    }
  },
  watch: {
    $route() {
      const params = this.$route.query
      this.socialForm.state = params.state
      this.socialForm.code = params.code
      if (!validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: `${
            this.socialForm.state === 'WX' ? '微信' : 'QQ'
          }登录中,请稍后。。。`,
          spinner: 'el-icon-loading'
        })
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    }
  },
  created() {
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  mounted() {
    // window.$('#form').hide()
    // window.$(document).ready(function() {
    //   window.$('#form').fadeIn(1500)
    // })
  },
  methods: {
    getTime() {
      this.time = new Date().toString()
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/login.scss";

@media screen and (max-width: 970px){
  .form {
    left: 39%!important;
  }
  .slide {
    display: none;
  }
}

.form {
  position: absolute;
  top: 40%;
  left: 70%;
  margin: -180px 0 0 -160px;
  width: 350px;
  height: 440px;
  padding: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  z-index: 1024;
}

.slide .stage {
  position: absolute;
  left: 15%;
  width: 400px;
  z-index: 4;
  //background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  top: 25%;
}

.slide .stage .logo {
  height: 264px;
  position: absolute;
  width: 100%;
  z-index: 4;
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: center;
}

</style>
